<template>
  <div class="app-container">
    <el-card>

      <el-descriptions class="margin-top" v-model="orderDetail" :title='$t("订单详情")' :column="2" :size="size" border>
        <template slot="extra">
          <el-button @click="addMark(orderDetail.remark)">{{$t('Add_Notes')}}</el-button>
          <el-button @click="print()">{{$t('打印订单')}}</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单编号
          </template>
          {{orderDetail.orderSn}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            {{$t('订单时间')}}
          </template>
          {{orderDetail.payTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            {{$t('会员账号')}}
          </template>
           {{orderDetail.mobile}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            {{$t('配送方式')}}
          </template>
          <el-tag size="small">{{filterTransportType(orderDetail.transportType)}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            {{$t('配送/取货时间')}}
          </template>
          {{orderDetail.receiptRanges}}
        </el-descriptions-item>
      </el-descriptions>

    </el-card>

    <el-card>
      <el-descriptions class="margin-top" v-model="orderDetail" :title='$t("收货人信息")' :column="3" :size="size" border>
<!--        <template slot="extra">-->
<!--          <el-button type="primary" size="small">{{$t("操作")}}</el-button>-->
<!--        </template>-->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            {{$t('收货人')}}
          </template>
          {{orderDetail.consignee}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            {{$t('手机号')}}
          </template>
          {{orderDetail.mobile}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            {{$t('收货地址')}}
          </template>
          {{orderDetail.address}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card >
      <div slot="header" class="clearfix">
        <span>{{$t('商品详细信息')}}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="false" :data="orderDetail.goods" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column align="center" :label="$t('Category_Name')" prop="goodsName"/>
        <el-table-column align="center" :label="$t('规格')" prop="specifications"/>
        <el-table-column align="center" :label="$t('数量')" prop="number"/>
        <el-table-column align="center" :label="$t('价格')" prop="discountPrice"/>
      </el-table>

    </el-card>

    <el-card>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"/>
        <span class="font-small">{{$t('Notes_info')}}</span>
      </div>
      <div class="table-layout">
        <el-row v-for="remark in orderRemarks" :key="remark.id">
          <el-col :span="24">
            <div>{{remark.remark}}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>


    <!-- 回复反馈对话框 -->
    <el-dialog :visible.sync="markDialogVisible" :title="$t('Notes')">
      <el-form ref="markForm" :model="orderDetail" :rules="markRules" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label="$t('Notes')" prop="remark">
          <el-input v-model="orderDetail.remark" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="markDialogVisible = false">{{$t('Cancel')}}</el-button>
        <el-button type="primary" @click="confirmMark" v-permission="['GET /admin/p/lumiere_subscribe_order_detail']">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
<!--  <div>-->
<!--    <el-button>-->

<!--    </el-button>-->
<!--  </div>-->
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import QRCode from "qrcodejs2";
import { orderGetRemarks, remarkOrder } from '../../api/order'

export default {
  name: 'CouponDetail',
  components: { Pagination, QRCode },
  filters: {

  },
  data() {

    return {
       orderDetail: {
          id: undefined,
          orderSn: '',
          payTime: '',
          mobile: '',
          tansportType: '',
          receiptRanges: '',
          remark: '',
          consignee: '',
          address: '',
          goods: [],
          goodsType: '',
          transportType: 1,
       },
      markDialogVisible: false,
      markRules: {
        remark: [
          { required: true, message: this.$t('Notes_cannot_be_empty'), trigger: 'blur' }
        ],
      },
      orderRemarks: [],
    }
  },
  created() {
    this.init()
    if (this.$route.query.id == null) {
      return
    }
    this.listGoodsQuery.id = this.$route.query.id;
  },
  mounted(){

  },
  methods: {
    init: function() {
      this.orderDetail = this.$route.query.orderDetail;
    },
    filterTransportType(transportType){
      if(transportType == 1){
        return this.$t('自取')
      }else if (transportType == 2) {
        return this.$t('门店配送')
      }else{
        return this.$t('物流')
      }
    },
    addMark(row) {
      this.markDialogVisible = true
      this.orderDetail.id = row.id

    },
    print(){
      this.$router.push({path:'/order/print',query:{id:this.orderDetail.id}})
    },
    confirmMark() {
      this.$refs['markForm'].validate((valid)=>{
        if(valid){
          remarkOrder({body: {orderId: this.orderDetail.id,remark: this.orderDetail.remark}}).then(response => {
            this.markDialogVisible = false
            this.$notify.success({
              title: this.$t('Success!'),
              message: this.$t('Noted!')
            })
            this.getRemarks()
          }).catch(response => {
            this.$notify.error({
              title: this.$t('Failed'),
              message: this.$t(response.data.errmsg)
            })
          })
        }
      })
    },
    getRemarks() {
      const id = this.$route.query.orderDetail.id
      orderGetRemarks(id).then(response => {
        this.orderRemarks = response.data.data.list
      })
    },
  }
}
</script>
<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}
.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}
.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
